<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <link rel="stylesheet" href="MessaageWall.css">
</head>
<body>
    <!-- 版心位置 -->
    <div class="container">
        <h2>表白墙</h2>
        <div class="text">输入后点击提交,会将信息显示在表格中</div>
        <div class="row">
            <span>谁:</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <span>说什么:</span>
            <input type="text" class="edit">
        </div>
        <div class="row">
            <input type="submit" value="提交" class="submit">
        </div>
    </div>
    <script>
        var submit = document.querySelector('.submit')
        submit.onclick = function() {
            var edits = document.querySelectorAll('.edit');
            var from = edits[0].value;
            var to = edits[1].value;
            var message = edits[2].value;
            console.log(from+"," + to + "," + message);
            if (from == '' || to == '' || message == '') {
                return;
            }
            var row = document.createElement("div");
            row.className = "row";
            row.innerHTML = from + '对' + to + '说: ' + message;
            var container = document.querySelector(".container");
            container.appendChild(row);
            for(var i = 0;i<3;i++) {
                edits[i].value = '';
            }
        }
        </script>
</body>
</html>